<template>
  <div class="table-box">
    <div class="content-box" v-if="isShow">
      <ProTable row-key="arrangeId" ref="proTable" :columns="columns" :requestApi="getTableList">
        <!-- 表格 header 按钮 -->
        <template #tableHeader="scope">
          <el-button type="primary" :icon="CirclePlus" @click="handleAdd()">新建班级</el-button>
        </template>
        <!-- 所属课程 -->
        <template #courseList="scope">
          {{ scope.row.courseName }}
        </template>
        <!-- 开课结课日期 -->
        <template #planDate="scope">
          <template v-if="scope.row.planStartDate && scope.row.planEndDate">
            {{ dayjs(scope.row.planStartDate).format('YYYY-MM-DD') }} - {{ dayjs(scope.row.planEndDate).format('YYYY-MM-DD') }}
          </template>
          <template v-else>
            --
          </template>
        </template>
        <!-- 上架状态 -->
        <template #saleStatus="scope">
          <el-tag :type="scope.row.saleStatus == 1 ? 'success' : 'warning'">{{ saleStatusMap[scope.row.saleStatus] }}</el-tag>
        </template>
        <!-- 备注（仅校区可见） -->
        <template #arrangeRemark="scope">
          {{ scope.row.arrangeRemark }}
          <el-link :icon="EditPen" />
        </template>
        <!-- 菜单操作 -->
        <template #operation="scope">
          <div class="flex justify-center">
            <!-- <el-button type="primary" link :icon="EditPen" @click="handleAdd(scope.row, 'edit')">详情</el-button> -->
            <el-button type="primary" link :icon="Open" @click="setArrangeSaleStatus(scope.row)">{{ scope.row.saleStatus == 1 ? '下架' : '上架'}}</el-button>
            <el-button type="primary" link :icon="EditPen" @click="handleAdd(scope.row, 'edit')">修改</el-button>
            <el-button type="primary" link :icon="CopyDocument" @click="handleAdd(scope.row, 'copy')">复制</el-button>
            <el-button type="primary" link :icon="DocumentDelete" @click="handleDelete(scope.row)">删除</el-button>
          </div>
        </template>
      </ProTable>
      <!-- 新建课程 -->
      <Add ref="addRef"></Add>
    </div>
  </div>
</template>

<script setup lang="ts" name="eduadmin">
import { ref, reactive, onMounted } from "vue";
import { GetCourseList, GetArrangeList, DeleteArrange, SetArrangeSaleStatus } from '@/api/modules/service'
import { CirclePlus, EditPen, Open, CopyDocument, DocumentDelete } from "@element-plus/icons-vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from '@/components/ProTable/index.vue'
import Add from './modules/Add.vue'
import dayjs from 'dayjs'

const isShow = ref<boolean>(true)
const proTable = ref()
const filterCourseList = ref<any[]>([])
const saleStatusMap = reactive<any>({
  1: '上架',
  2: '下架'
})
// 表格配置项
const columns: ColumnProps[] = [
  { type: 'selection', fixed: 'left', width: 70 },
  { prop: 'arrangeId', label: 'ID', width: 100,
    search: {
      el: 'input',
      key: 'arrangeId',
    }
  },
  { prop: 'arrangeName', label: '班级名称', width: 125, },
  { prop: 'courseList', label: '所属课程', width: 125,
    search: {
      el: 'select',
      key: 'courseId',
      props: { filterable: true }
    },
    fieldNames: {
      label: 'courseName',
      value: 'courseId'
    },
    enum: filterCourseList.value
  },
  { prop: 'arrangeWeek', label: '上课时段' },
  { prop: 'planDate', label: '开课结课日期' },
  { prop: 'arrangeMinCapacity', label: '开班人数' },
  { prop: 'arrangeMaxCapacity', label: '满班人数' },
  { prop: 'arrangeOutlinePrice', label: '课单价' },
  { prop: 'tagName', label: '班级标签' },
  { prop: 'saleStatus', label: '上架状态',
    enum: [{ label: '上架', value: 1 }, { label: '下架', value: 2 }]
  },
  { prop: 'arrangeRemark', label: '备注（仅校区可见）' },
  { prop: 'createdAt', label: '创建时间' },
  { prop: 'operation', label: '操作', width: 280, fixed: 'right' }
];
async function getTableList(params: any) {
  // params.arrangeType = 'Formal'
  params.arrangeType = 'Template'
  return GetArrangeList(params);
}
// 获取课程列表
async function _getCourseList() {
  const { data }: any = await GetCourseList({ pageSize: 10000 })
  filterCourseList.value.length = 0;
  if (data && data.list.length > 0) {
    filterCourseList.value.push(...data.list)
  }
}
// 添加班级
const addRef = ref()
function handleAdd(rowData: Partial<any> = {}, type = 'add') {
  const params = {
    rowData: { ...rowData, semesterId: proTable.value?.searchParam.semesterId },
    getTableList: proTable.value.getTableList,
    enumMap: Object.fromEntries(proTable.value.enumMap)
  }
  addRef.value.acceptParams(params, type);
}
/** 删除 */
async function handleDelete(rowData: Partial<any> = {}) {
  await useHandleData(DeleteArrange, { arrangeIds: [rowData.arrangeId] }, '删除该课程')
  proTable.value?.resetTableList();
}
async function setArrangeSaleStatus(rowData: Partial<any> = {}) {
  const msg = '确定' + (rowData.saleStatus === 1 ? '下架' : '上架') + '该班级？'
  await useHandleData(SetArrangeSaleStatus, { arrangeIds: [rowData.arrangeId], saleStatus: rowData.saleStatus === 1 ? 2 : 1 }, msg)
  proTable.value?.resetTableList();
}
onMounted(() => {
  _getCourseList()
})
</script>
<style lang='scss' scoped>
.sale-flex {
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    margin-right: 10px;
  }

  :deep(.el-switch) {
    &.is-disabled {
      opacity: 1;

      .el-switch__core {
        cursor: pointer !important;
      }
    }
  }
}
.el-dropdown-link {
  display: flex;
  align-items: center;
}
</style>